<!-- TodoItem.vue -->  
<template>  
    <div class="todo-item">  
      <input type="checkbox" :checked="completed" @change="toggleCompletion" />  
      <label :class="{ 'completed': completed }">{{ title }}</label>  
      <button @click="removeTodo">删除</button>  
    </div>  
  </template>  
    
  <script>  
  export default {  
    name: 'TodoItem',  
    props: {  
      title: {  
        type: String,  
        required: true  
      },  
      completed: {  
        type: Boolean,  
        default: false  
      }  
    },  
    methods: {  
      toggleCompletion() {  
        this.$emit('update:completed', !this.completed);  
      },  
      removeTodo() {  
        this.$emit('remove-todo');  
      }  
    }  
  };  
  </script>  
    
  <style scoped>  
  .todo-item {  
    display: flex;  
    align-items: center;  
    margin-bottom: 10px;  
  }  
    
  .completed {  
    text-decoration: line-through;  
  }  
  </style>